<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <header class="header header-shadow">
        <div class="header-left">
            <div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>
            </div>
        </div>
        <h2>个人资料</h2>
    </header>
</div>

<div class="header-h" style="padding-top: 1.5rem;"></div>
<section class="html_section pr30 pl30 ">
    <ul class="setting_option f30 info">
        <li class="between line_center c-666">
            <div class="c-333">头像</div>
            <div class="line_center">
                <div class="member_head bg-cover" tapmode onclick="upload()"
                     style="background: url('../../image/img-tx.png')"></div>
                <img class="ml30 arr_move" src='../../icon/move.png'/>
            </div>
        </li>
        <li class="between line_center" tapmode onclick="commonUrl('../member/member_edit_name')">
            <div>昵称（可消耗盐汽水修改）</div>
            <div class="line_center">
                <div class="f28 c-999" id="nickname"></div>
                <img class="ml30 arr_move" src='../../icon/move.png'/>
            </div>
        </li>
        <li class="between line_center">
            <div>性别</div>
            <div class="line_center" tapmode onclick="chooseSex()">
                <div class="f28 c-999" id="sex">男</div>
                <img class="ml30 arr_move" src='../../icon/move.png'/>
            </div>
        </li>
    </ul>
    <div class="h90 line_center">个性签名</div>
    <textarea class="textbox2" maxlength="40" id="autograph" placeholder="请输入您的个性签名...(最多40个字)"></textarea>
    <div class="mt100 btn1" tapmode onclick="saveInfo()">保存</div>
</section>

</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var icon = '';//头像
    var sex = '';// 性别：1男 2女 3保密
    apiready = function () {
        setFixStatusBar(); //设置状态栏
        pop.loading()
        keybackListener()
        api.addEventListener({
            name: 'memberInfo'
        }, function (ret, err) {
            getMemberInfo()
        });

        getMemberInfo()
    }

    $(".textbox2").on('input',function () {
        console.log($(this).val())
    })

    //提交个人信息
    function saveInfo() {
        var param = {
            token: $api.getStorage('token'),
            autograph: $("#autograph").val(),
            icon: icon,
            sex: sex,
        }
        pop.loading();
        getAjax(Interface.edit_member, param, function (res) {
            pop.close();
            pop.notice('保存成功');
            //添加个人资料修改监听事件
            api.sendEvent({
                name: 'memberInfo',
                extra: {}
            });
            getMemberInfo();
            setTimeout(function () {
                comeBack()
            },2000)
        }, function (error) {
            pop.close();
            pop.notice('保存失败');
        });
    }

    //获取用户信息
    function getMemberInfo() {
        var param = {
            token: $api.getStorage('token')
        }

        getAjax(Interface.memberIndex, param, function (res) {

            var data = res.data;

            //头像
            $(".member_head").css({background: 'url(' + ajaxUrl + data.icon_path + ')'});
            //昵称
            $("#nickname").html(data.name);
            //性别 1男  2女  0保密
            if (data.sex == 1) {
                $("#sex").html('男');
            } else if (data.sex == 2) {
                $("#sex").html('女');
            } else {
                $("#sex").html('保密');
            }

            //个性签名
            if (data.autograph != 0) {
                $("#autograph").val(data.autograph);
            }
            pop.close();

        }, function (error) {
            pop.close();
            pop.notice('读取数据失败')
        })
    }


    //上传头像
    function upload() {
        uploadHeadPic(function (res) {
            icon = res.icon;
            $(".member_head").css({background: 'url(' + ajaxUrl + res.path + ')'});
        })
    }

    //选择性别
    function chooseSex() {
        api.actionSheet({
            // title : '选择性别',
            cancelTitle: '取消',
            buttons: ['男', '女', '保密']
        }, function (ret, err) {
            if (ret) {
                if (ret.buttonIndex == 1) {
                    $("#sex").html('男')
                    sex = 1
                } else if (ret.buttonIndex == 2) {
                    $("#sex").html('女')
                    sex = 2
                } else if (ret.buttonIndex == 3) {
                    $("#sex").html('保密')
                    sex = 3
                }
            }
        });
    }

</script>
